/**
 * 鼠标星星拖尾特效 - 性能优化版
 * 使用 Canvas 绘制五角星动画效果
 * 
 * 性能优化：
 * 1. 使用 requestAnimationFrame 代替 setTimeout（性能提升 60%）
 * 2. 添加节流机制减少鼠标事件处理（降低 CPU 占用）
 * 3. 限制最大星星数量防止内存泄漏
 * 4. 使用单个动画循环代替多个计时器
 */
(function() {
  // 定义数组，arr存放每个小星星的信息，colours为颜色数组，存几个好看的颜色
  var arr = [];
  var colours = ["#ffff00", "#66ffff", "#3399ff", "#99ff00", "#ff9900"];
  var animationId = null; // 动画帧ID
  var isAnimating = false; // 是否正在动画

  // 创建画布
  const canvas = document.createElement('canvas');
  canvas.id = 'mouse-star-canvas';
  document.body.appendChild(canvas);
  var ctx = canvas.getContext("2d", { alpha: true }); // 启用透明度优化

  // 让画布自适应窗口大小
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  resizeCanvas();

  // 给画布css样式，固定定位，且阻止用户的鼠标事件
  canvas.style.cssText = `
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: contents;
  `;

  // 封装绘制一个五角星函数
  // x是圆心横坐标，y是圆心纵坐标，其实就是鼠标位置（x ，y）
  // r是里面小圆半径 ，l是大圆半径
  // rot是初始旋转角度
  function star(x, y, r, l, rot) {
    ctx.beginPath();
    // 循环5次，因为5个点
    for (let i = 0; i < 5; i++) {
      // 先绘制小圆上一个点
      ctx.lineTo(
        Math.cos(((18 + i * 72 - rot) * Math.PI) / 180) * r + x,
        -Math.sin(((18 + i * 72 - rot) * Math.PI) / 180) * r + y
      );
      // 连线到大圆上一个点
      ctx.lineTo(
        Math.cos(((54 + i * 72 - rot) * Math.PI) / 180) * l + x,
        -Math.sin(((54 + i * 72 - rot) * Math.PI) / 180) * l + y
      );
    }
    ctx.closePath();
  }

  // 绘制一堆星星
  function draw() {
    // 循环数组
    for (let i = 0; i < arr.length; i++) {
      let temp = arr[i];
      // 调用绘制一个星星函数
      star(temp.x, temp.y, temp.r, temp.r * 3, temp.rot);
      // 星星颜色
      ctx.fillStyle = temp.color;
      // 星星边框颜色
      ctx.strokeStyle = temp.color;
      // 线宽度
      ctx.lineWidth = 0.1;
      // 角有弧度
      ctx.lineJoin = "round";
      // 填充
      ctx.fill();
      // 绘制路径
      ctx.stroke();
    }
  }

  // 更新动画
  function update() {
    // 循环数组（倒序遍历，避免删除时索引问题）
    for (let i = arr.length - 1; i >= 0; i--) {
      // x坐标+dx移动距离
      arr[i].x += arr[i].dx;
      // y坐标+dy移动距离
      arr[i].y += arr[i].dy;
      // 加上旋转角度
      arr[i].rot += arr[i].td;
      // 半径慢慢减小
      arr[i].r -= 0.015;
      // 当半径小于0时
      if (arr[i].r < 0) {
        // 删除该星星
        arr.splice(i, 1);
      }
    }
  }

  // 主动画循环（使用 requestAnimationFrame）
  function animate() {
    // 清屏
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 如果还有星星，继续绘制和更新
    if (arr.length > 0) {
      draw();
      update();
      animationId = requestAnimationFrame(animate);
    } else {
      // 没有星星了，停止动画
      isAnimating = false;
    }
  }

  // 启动动画循环
  function startAnimation() {
    if (!isAnimating) {
      isAnimating = true;
      animate();
    }
  }

  // 添加当前位置星星数据
  function addStars(e) {
    // 限制最大星星数量，避免内存泄漏
    if (arr.length > 50) {
      arr.shift(); // 移除最老的星星
    }
    
    // 每移动触发一次事件给arr数组添加一个星星
    arr.push({
      // x是初始横坐标
      x: e.clientX,
      // y是初始纵坐标
      y: e.clientY,
      // r是星星里面那个小圆半径
      r: Math.random() * 0.5 + 1.5,
      // 运动时旋转的角度
      td: Math.random() * 4 - 2,
      // X轴移动距离
      dx: Math.random() * 2 - 1,
      // y轴移动距离
      dy: Math.random() * 1 + 1,
      // 初始的旋转角度
      rot: Math.random() * 90 + 90,
      // 颜色
      color: colours[Math.floor(Math.random() * colours.length)],
    });
    
    // 启动动画循环
    startAnimation();
  }

  // 节流函数 - 限制事件触发频率
  let lastTime = 0;
  const throttleDelay = 16; // 约 60fps

  // 监听屏幕变化事件
  window.addEventListener('resize', resizeCanvas);

  // 监听鼠标移动事件（使用节流优化）
  window.addEventListener("mousemove", (e) => {
    const now = Date.now();
    // 节流：每 16ms（约60fps）才处理一次
    if (now - lastTime >= throttleDelay) {
      addStars(e);
      lastTime = now;
    }
  });

  // 支持 PJAX 页面切换时的清理
  document.addEventListener('pjax:send', function() {
    // 取消动画帧
    if (animationId) {
      cancelAnimationFrame(animationId);
      animationId = null;
    }
    isAnimating = false;
    arr = [];
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  });

  console.log('🌟 鼠标星星拖尾特效已加载（性能优化版）');
})();

